<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>keioi</title>
</head>
<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	h1 {
		color: #426696;
		font-family: Georgia, 'Times New Roman', Times, serif;
		font-weight: 600;
		font-size: 3rem;
		opacity: 0.8;
	}

	h2,
	p {
		color: #426696;
		font-family: Georgia, 'Times New Roman', Times, serif;
		font-weight: 500;
		opacity: 0.8;
	}

	h3 {
		color: #426696;
		font-family: Georgia, 'Times New Roman', Times, serif;
		font-weight: 600;
		opacity: 0.8;
	}

	a {
		text-decoration: none;
	}

	p>a:hover {
		color: violet;
		font-weight: bolder;
	}

	a:visited {
		color: dodgerblue;
	}

	main {
		min-height: 100vh;
		background: linear-gradient(to right top, #a3ca9a,#a3ca9a);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.glass {
		background: white;
		min-height: 80vh;
		width: 62%;
		background: linear-gradient(to right bottom,
				rgb(255, 255, 255, 0.7),
				rgb(255, 255, 255, 0.3));
		border-radius: 2rem;
		z-index: 2;
		backdrop-filter: blur(2rem);
		-webkit-backdrop-filter: blur(2rem);
		display: flex;
	}

	.user {
		cursor: pointer;
	}

	img {
		width: 3rem;
		height: 3rem;
	}


	.circle1,
	.circle2 {
		background: white;
		background: linear-gradient(to right bottom,
				rgb(255, 255, 255, 0.8),
				rgb(255, 255, 255, 0.3));
		height: 20rem;
		width: 20rem;
		position: absolute;
		border-radius: 50%;
	}

	.circle1 {
		top: 5%;
		right: 15%;
	}

	.circle2 {
		bottom: 5%;
		left: 10%;
	}

	.dasboard {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		text-align: center;
		background: linear-gradient(to right bottom,
				rgb(255, 255, 255, 0.7),
				rgb(255, 255, 255, 0.3));
		border-radius: 2rem;
	}

	.link {
		display: flex;
		margin: 2rem 0rem;
		padding: 1rem 2rem;
		align-items: center;
		cursor: pointer;
	}

	.link h2 {
		padding: 0rem 1rem;
	}

	.underline {
		border: solid 2px #6cdbeb;
		box-shadow: 20px 38px 34px -26px #bae4eb;
		border-radius: 255px 15px 225px 15px/255px 15px 255px 15px;
		transition: border-radius .5s ease;

	}


	.listcards {
		flex: 2;
	}

	.pro {
		background: linear-gradient(to right top, #d4f0ce,#d4f0ce);
		border-radius: 1rem;
		color: white;
		padding: 1rem;
		display: flex;
		width: 92%;
		align-items: center;
		position: relative;
	}

	.pro img {
		position: absolute;
		right: 6%;
	}

	.pro h3 {
		color: #287a54;
		width: 60%;
		opacity: 0.8;
		font-weight: 600;
	}

	.status {
		margin-bottom: 2rem;
	}

	.status input {
		background: linear-gradient(to right bottom,
				rgb(255, 255, 255, 0.7),
				rgb(255, 255, 255, 0.3));
		border: none;
		width: 50%;
		padding: 0.5rem;
		border-radius: 2rem;

	}

	.listcards {
		margin: 2rem;
		display: flex;
		flex-direction: column;
		/* justify-content:space-evenly; */
	}

	.card {
		display: flex;
		background: linear-gradient(to right bottom,
				rgb(255, 255, 255, 0.8),
				rgb(255, 255, 255, 0.5));
		border-radius: 1rem;
		margin: 2rem 0rem;
		padding: 1rem;
		box-shadow: 6px 6px 20px rgb(122, 122, 122, 0.2);
		height: 80%;
		/* justify-content: space-between; */

	}

	.card-info p {
		margin-top: 8px
	}


	.progress {
		background: linear-gradient(to right top, #65dfc9, #6cdbeb);
		width: 100%;
		height: 6%;
		border-radius: 1rem;
		position: relative;
		overflow: hidden;
	}

	.progress::after {
		content: "";
		width: 100%;
		height: 100%;
		background: rgb(236, 236, 236);
		position: absolute;
		left: 60%;
	}

	/* .card-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	} */
	.percentage {
		font-weight: bold;
		background: linear-gradient(to right top, #65dfc9, #6cdbeb);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
</style>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<body>
	<main>
		<section class="glass">
			<div class="dasboard">
				<div class="user">
					<img src="./img/1.png" alt="">
					<h3>keioi</h3>
					<p>人生如逆旅，我亦是行人。</p>
				</div>
				<div class="links">
					<div class="link" id='moon'>
						<img src="./img/2.png" alt="">
						<h2>游戏</h2>
					</div>
					<div class="link" id='love'>
						<img src="./img/3.png" alt="">
						<h2>视频</h2>
					</div>
					<div class="link" id='flower'>
						<img src="./img/4.png" alt="">
						<h2>系统</h2>
					</div>
				</div>
				<div class="pro">
					<h3>一花一世界，一木一浮生，一草一天堂。</h3>
					<img src="./img/5.png" alt="">
				</div>
			</div>
			<div class="listcards">
				<div class="status">
					<h1>no search</h1>
					<input type="text">
				</div>
				<div class="cards">
					<div class="card" id='jax'>
						<img src="./img/6.png" alt="">
						<div class="card-info">
							<h2>我的 web's</h2>
							<p><a href="https://www.keioi.cn" target="_blank">keioi小哥</a></p>
							<p> <a href="https://keioi.gitee.io/kei/" target="_blank">kei工具</a></p>
                            <p> <a href="https://keioi.gitee.io/chat/" target="_blank">车销量chart,chat</a></p>
							<p><a href="https://keioi.gitee.io/pc/" target="_blank">win查询电脑配置/激活方法</a>(gitee源)</p>
                            <p><a href="https://keiooi.github.io/awin/" target="_blank">win查询电脑配置/激活方法</a>(github源)</p>
							<!-- <div class="progress"></div> -->
						</div>
						<h2 class="percentage"></h2>
					</div>


				</div>
			</div>
		</section>
	</main>
	<div class="circle1"></div>
	<div class="circle2"></div>
</body>
<script>
	$(document).ready(function () {
		$('#moon').click(function () {
			$('#jax').load('./t1.html')
			// $('#moon>h2').addClass('underline')
			// $('#love>h2').removeClass('underline')
			// $('#flower>h2').removeClass('underline')
		})
		$('#love').click(function () {
			$('#jax').load('./t2.html')

		})
		$('#flower').click(function () {
			$('#jax').load('./t3.html')

		})
		$('.user').click(function () {
			location.reload();
		})

		$('.link').click(function () {
			$('.link').removeClass('underline')
			$(this).addClass('underline')
		})




	})

</script>

</html>